<!DOCTYPE html>
<html lang="vi">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <link href="dist/css/bootstrap.css" rel="stylesheet" type="text/css"/>
        <script src="dist/js/bootstrap.js" type="text/javascript"></script>


        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <title>Demo List</title>
    </head>
    <body>
        <header>
            <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <a class="navbar-brand" href="index.html" data-toggle="tooltip" data-placement="left" title="brand">
                            <span class="glyphicon glyphicon-send"></span>
                        </a>
                    </div>
                    <p class="navbar-text" data-toggle="tooltip" data-placement="left" title="Site name">FASmile <span class="badge">42</span></p>

                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active" data-toggle="tooltip" data-placement="bottom" title="Home page">
                                <a href="index.html">
                                    <span class="glyphicon glyphicon-home"></span>
                                    Index
                                </a>
                            </li>
                            <li>
                                <a href="signin.html" data-toggle="tooltip" data-placement="left" title="register page">
                                    <span class="glyphicon glyphicon-pencil"></span>
                                    Sign In 
                                </a>
                            </li>
                            <li>
                                <a href="view.html" data-toggle="tooltip" data-placement="left" title="View page">
                                    <span class="glyphicon glyphicon-eye-open"></span>
                                    View 
                                </a>
                            </li>
                            <li>
                                <a href="post.html" data-toggle="tooltip" data-placement="left" title="Post page">
                                    <span class="glyphicon glyphicon-file"></span>
                                    Post 
                                </a>
                            </li>
                            <li>
                                <a href="upload.html" data-toggle="tooltip" data-placement="left" title="Upload page">
                                    <span class="glyphicon glyphicon-open"></span>
                                    Upload 
                                </a>
                            </li>
                            <li>
                                <a href="list.html" data-toggle="tooltip" data-placement="left" title="List page">
                                    <span class="glyphicon glyphicon-th-list"></span>
                                    List 
                                </a>
                            </li>
                        </ul>

                        <form class="navbar-form navbar-right" role="search">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Search">
                                <button type="submit" class="btn btn-default">
                                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                                </button>

                            </div>
                        </form>
                    </div>
                </div>
            </nav>
        </header>


        <footer class="container">
            <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
                <div class="container">
                    <address>
                        <font color="red"><strong>Author: </strong></font><font color="green"><strong>Lương Thế Hai</strong></font>
                        <br/>
                        <strong>Email: </strong><a href="#">FASmile1404@gmail.com</a>
                    </address>
                </div>
            </nav>

        </footer>

        <div class="container" style="margin-top: 55px; width: 80%;">

            <table class="table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Column heading</th>
                        <th>Column heading</th>
                        <th>Column heading</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="active">
                        <td>1</td>
                        <td>Column content</td>
                        <td>Column content</td>
                        <td>Column content</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Column content</td>
                        <td>Column content</td>
                        <td>Column content</td>
                    </tr>
                    <tr class="success">
                        <td>3</td>
                        <td>Column content</td>
                        <td>Column content</td>
                        <td>Column content</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>Column content</td>
                        <td>Column content</td>
                        <td>Column content</td>
                    </tr>
                    <tr class="info">
                        <td>5</td>
                        <td>Column content</td>
                        <td>Column content</td>
                        <td>Column content</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>Column content</td>
                        <td>Column content</td>
                        <td>Column content</td>
                    </tr>
                    <tr class="warning">
                        <td>7</td>
                        <td>Column content</td>
                        <td>Column content</td>
                        <td>Column content</td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td>Column content</td>
                        <td>Column content</td>
                        <td>Column content</td>
                    </tr>
                    <tr class="danger">
                        <td>9</td>
                        <td>Column content</td>
                        <td>Column content</td>
                        <td>Column content</td>
                    </tr>
                </tbody>
            </table>
            
            <nav>
                <ul class="pagination">
                    <li class="previous disabled">
                        <a href="#">
                            <span aria-hidden="true">&laquo;</span>
                            <span class="sr-only">Previous</span>
                        </a>
                    </li>

                    <li class="active"><span>1</span></li>
                    <li class="disable"><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
                </ul>
            </nav>
        </div>
    </body>
</html>